<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Zusheng Studio</title>
  <style>
      /*导入./assets/fonts/adobe-garamond-2.otf 字体*/
      @font-face {
          font-family: 'Adobe Garamond';
          src: url('./fonts/adobe-garamond-2.otf');
          font-weight: normal;
      }

      html, body {
          padding: 0;
          margin: 0;
          background: rgb(234, 234, 235);
          color: rgb(4, 4, 5);
          font-family: 'Adobe Garamond', serif;
          font-weight: 400;
          border: none;
      }

      ul {
          padding: 0;
          margin: 50px 0 0;
      }

      li {
          list-style: none;
          font-size: 14px;
          margin-top: 8px;
      }

      a {
          text-decoration: none;
          color: rgba(0, 0, 0, 0.9);
      }

      a:hover {
          color: rgba(0, 0, 0, 0.45);
      }

      .main {
          position: fixed;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          display: flex;
          justify-content: space-between;
          box-sizing: border-box;
          padding: 18px;
      }

      .menu {
          width: 360px;
          height: 100%;
          flex-shrink: 0;
          padding: 30px 0 0 30px;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          box-sizing: border-box;
      }

      .menu .title {
          font-size: 20px;
          flex-shrink: 0;
      }

      .menu .list {
          flex: 1;
      }

      .media-overlay {
          flex: 1;
          position: relative;
      }

      .media-overlay > .mask {
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          background: linear-gradient(to bottom, transparent 80%, rgba(0, 0, 0, 0.35));
      }

      .media-overlay > .media-desc {
          position: absolute;
          bottom: 0;
          left: 0;
          right: 0;
          padding: 20px 50px;
          z-index: 2;
          color: rgba(240, 240, 242, 1);
          font-family: serif;
          font-weight: 600;
          font-size: 20px;
          text-align: right;
      }

      .media-overlay > .media-desc > p {
          margin: 0;
          line-height: 1.5;
      }

      /*.media-overlay > .mask, .media-overlay > .media-desc {*/
      /*    opacity: 0;*/
      /*    transition: opacity 0.1s;*/
      /*}*/

      /*.media-overlay:hover > .mask, .media-overlay:hover > .media-desc {*/
      /*    opacity: 1;*/
      /*}*/


      .media {
          width: 100%;
          height: 100%;
          object-fit: cover;
      }

      .footer {
          font-size: 12px;
          color: rgba(0, 0, 0, 0.45);
          flex-shrink: 0;
      }

      .footer > p {
          line-height: 1.5;
          margin: 0;
      }
  </style>
</head>
<body>
<div class="main">
  <div class="menu">
    <div class="title">
      Zusheng Studio
    </div>
    <ul class="list">
      <li>
        <a href="">Works</a>
      </li>
      <li>
        <a href="">Articles</a>
      </li>
      <li>
        <a href="">GitHub</a>
      </li>
      <li>
        <a href="">Photography</a>
      </li>
      <li>
        <a href="">Contact</a>
      </li>
    </ul>
    <div class="footer">
      <p class="copy">
        © 2025 Zusheng Studio. All rights reserved.
      </p>
      <p>粤ICP备2024268087号-1</p>
    </div>
  </div>
  <div class="media-overlay">
    <div class="mask"></div>
    <div class="media-desc">
      <p>别赶路 去感受路</p>
      <p style="font-size: 14px; color: rgba(255,255,255,0.65)">10天3800公里，沃尔沃XC60向北疆出发</p>
    </div>
    <video class="media" src="./Timeline.webm" autoplay loop muted preload="auto" playsinline></video>
  </div>
</div>
</body>
</html>
